<template>
  <div class="page-table-wrapper">
    <div class="page-table-box" :style="style">
      <div class="page-table-default">
        <slot />
      </div>
      <template v-if="$slots.leftButton">
        <TableBar>
          <slot name="leftButton"></slot>
          <template #extra>
            <slot name="button"></slot>
          </template>
        </TableBar>
      </template>
      <div class="page-table-resize">
        <slot name="resize" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, computed, PropType } from 'vue';
  import TableBar from '../TableBar/index.vue';

  const props = defineProps({
    border: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    backgroundColor: {
      type: String as PropType<string>,
      default: '#fff',
    },
  });

  const style = computed(() => {
    return {
      backgroundColor: props.backgroundColor,
      border: props.border ? '1px solid rgb(229, 230, 235)' : '',
    };
  });
</script>

<style lang="less">
  .page-table-wrapper {
    width: 100%;
    padding: 0 12px 12px;

    .page-table-box {
      padding: 12px;
      // display: flex;
      // flex-direction: column;
      border-radius: 2px;
      width: 100%;
      // height: 100%;
      overflow: hidden;

      .page-table-default {
        width: 100%;
        flex-shrink: 0;
      }

      .page-table-resize {
        width: 100%;
        // height: 100%;
        flex-shrink: 10;
        // overflow: hidden;
      }
    }
  }
</style>
